<template>
  <div class="site-detail">
    <div class="detail-content">
      <MenuLocation :title="'找场地 / 详情'"></MenuLocation>
      <div class="information-show">
        <p class="school">{{ detailContent.siteName }}</p>
        <div class="location-row">
          <img
            class="location-img"
            src="@/assets/site/blueLocation.png"
            alt=""
          />
          <span class="location">{{ detailContent.siteAddress }}</span>
        </div>
        <p class="rich-text" v-html="detailContent.siteDetail"></p>
        <div class="collect">
          <Icon
            v-if="!mdStatus"
            type="md-star"
            style="font-size: 16px; color: #333333"
            @click="setMdStatus(true)"
          />
          <Icon
            v-else
            type="md-star"
            style="font-size: 16px; color: #fdcd10"
            @click="setMdStatus(false)"
          />
          <span>收藏</span>
        </div>
      </div>
    </div>
    <Footer :top="20"></Footer>
  </div>
</template>
<script>
import MenuLocation from "@/components/myComponents/menuLocation.vue";
import Footer from "@/components/footer/my_footer.vue";
import { toCollect } from "@/api/course";
import { getSiteInfoId } from "@/api/yk_record";
export default {
  data() {
    return {
      detailContent: {},
      mdStatus: false,
    };
  },
  mounted() {
    this.detailContent = JSON.parse(this.$route.query.detailContent);
    console.log(this.detailContent)
    this.getInfoData();
  },
  methods: {
    getInfoData() {
      getSiteInfoId(this.detailContent.id || this.detailContent.siteId).then(
        (res) => {
          if (res.code == "200") {
            this.mdStatus = res.result.isCollect == 1 ? true : false;
            this.detailContent = res.result
          } else {
            this.$Message.error(res.message || "查询失败!");
          }
        }
      );
    },
    //收藏
    setMdStatus(blo) {
      let params = {
        relationId: this.detailContent.id,
        typeId: "1002003",
      };
      toCollect(params).then((res) => {
        if (res.code == "200") {
          this.$Message.success(`${blo ? "收藏" : "取消收藏"}成功!`);
          this.mdStatus = blo;
        } else {
          this.$Message.error(res.message || "收藏失败!");
        }
      });
    },
  },
  components: {
    MenuLocation,
    Footer,
  },
};
</script>
<style lang="scss" scoped>
.site-detail {
  position: relative;
  min-height: calc(100vh - (80 / 1920 * 100vw));
  .detail-content {
    padding: 0px calc(150 / 1920 * 100vw);
    .information-show {
      padding: calc(45 / 1920 * 100vw) calc(213 / 1920 * 100vw)
        calc(99 / 1920 * 100vw);
      background: #fff;
      border-radius: calc(5 / 1920 * 100vw);
      position: relative;
      .school {
        font-size: calc(28 / 1920 * 100vw);
        color: #333333;
        text-align: center;
      }
      .location-row {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: calc(12 / 1920 * 100vw);
        .location-img {
          width: calc(11 / 1920 * 100vw);
          height: calc(14 / 1920 * 100vw);
        }
        .location {
          margin-left: calc(4 / 1920 * 100vw);
        }
      }
      :deep(.rich-text) {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: calc(35 / 1920 * 100vw) !important;
        > p:first-of-type {
          margin-top: calc(0 / 1920 * 100vw) !important;
        }
        > p {
          margin-top: calc(30 / 1920 * 100vw) !important;
        }
        > img {
          margin-top: calc(30 / 1920 * 100vw) !important;
          width: calc(800 / 1920 * 100vw);
          height: calc(450 / 1920 * 100vw);
          border-radius: calc(10 / 1920 * 100vw);
        }
      }
      .collect {
        position: absolute;
        right: calc(40 / 1920 * 100vw);
        top: calc(40 / 1920 * 100vw);
        display: flex;
        align-items: center;
        cursor: pointer;
        .collect-img {
          width: calc(20 / 1920 * 100vw);
          height: calc(19 / 1920 * 100vw);
        }
        > span {
          font-size: calc(16 / 1920 * 100vw);
          color: #a1a1a1;
          margin-left: calc(6 / 1920 * 100vw);
        }
      }
    }
  }
}
</style>
